<!DOCTYPE html>
<html lang="zh">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>五种常见html导航栏之二-菜单居中</title>
 <style>
  /* 公共css-开始 */
  body {
   background-color: #dedede;
   margin: 0;
   color: #333;
  }


  ul {
   list-style: none;
   padding: 0;
  }

  a {
   text-decoration: none;
   color: #333;
  }

  h1,
  p {
   margin: 0;
  }

  .blank-section {
   height: 100px;
   width: 100px;
  }

  /* 公共css-结束 */
  /* 左logo-开始 */
  header {
   width: 100%;
   height: 75px;
   background-color: #ffffff;
   -webkit-box-shadow: 0px 5px 5px 0px rgb(71 96 158 / 26%);
   -moz-box-shadow: 0px 5px 5px 0px rgb(71 96 158 / 26%);
   box-shadow: 0px 5px 5px 0px rgb(71 96 158 / 26%);
  }

  .topMenu {
   width: 1366px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 200px 1fr 200px;
   gap: 20px;
   place-content: center;
   height: 75px;

  }
  .topMenu a:hover{
   color: rgb(82,104,186);
   font-weight: bolder;
  }
  .topMenu a:active {
   opacity: 0.7;
   font-weight: bold;
  }
  .topMenu .left img {
   width: 50px;
   height: 50px;
   border-radius: 5px;
  }

  .topMenu .middle .menu-list {
   display: grid;
   grid-template-columns: repeat(4, 120px);
   place-items: center;
  }

  .topMenu .right .login-list {
   display: grid;
   grid-template-columns: 1fr 20px 1fr;
   place-items: center;
  }
  /* 左logo-结束 */
 </style>
</head>

<body>
 <!--左logo 中 菜单 右 登录|注册 -->
 <header>
  <div class="topMenu">
   <div class="left">
    <img src="https://pic.imgdb.cn/item/65904693c458853aef2079a1.png" alt="网站logo-松蕴大胖">
   </div>
   <div class="middle">
    <ul class="menu-list">
     <li>
      <a class="active" href="#">首页</a>
     </li>
     <li>
      <a href="#">新闻中心</a>
     </li>
     <li>
      <a href="#">服务项目</a>
     </li>
     <li>
      <a href="#">关于我们</a>
     </li>
    </ul>
   </div>
   <div class="right">
    <ul class="login-list">
     <li><a href="#">登录</a></li>
     <li>|</li>
     <li><a href="#">注册</a></li>
    </ul>
   </div>
  </div>

 </header>
 <!--左logo 中 菜单 右 登录|注册 -结束 -->
</body>

</html>